<template>
  <div class="course-detail-content">
    <!-- 导航部分 -->
    <div class="detail-nav">
      <ul class="m-center">
        <li
          class="nav-item"
        >
          课程章节
        </li>
      </ul>
    </div>

    <!-- 内容部分 -->
    <div class="detail-information m-center">
      <div class="information-left">
        <div class="chapter">
          <div v-if="data.introduce" class="chapter-introduce">
            简介：{{ data.introduce }}
          </div>
          <div v-for="(chapter,index) in data.courseChapterVos" :key="index" class="chapter-item">
            <h2 class="chapter-title">
              {{ chapter.name }}
            </h2>
<!--            <p class="chapter-desc">-->
<!--              {{ chapter.desc }}-->
<!--            </p>-->
            <ul>
              <li v-for="(child, index) in chapter.children" :key="index" class="term-item" @click="playVideo(child.id)">
                <p>
                  <span class="iconfont play">&#xe615;</span>
                  <span>{{ child.name }}({{ child.videoLength }})</span>
                  <span class="right">
              <i v-if="child.rate == 100" class="iconfont complete">&#xe60f;</i>
              <span v-else-if="child.rate > 0 && child.rate < 100" class="doning">
                最近学习
                <i class="iconfont">&#xe601;</i>
              </span>
              <i v-else class="iconfont ready">&#xe6e8;</i>
            </span>
                </p>
              </li>
            </ul>
          </div>
<!--          <p class="complete-info">-->
<!--            <i class="iconfont">&#xe786;</i>-->
<!--            本课程已完结-->
<!--          </p>-->
        </div>
<!--        <component :is="componentName" :list="content" />-->
      </div>
      <div class="information-right">
        <div class="course-detail-tips">
          <!-- 学习情况 -->
          <div v-if="lastest && lastest.percent > 0" class="learn-info">
            <p>
              <span class="percent">已学习{{ lastest.percent }}%</span>
              <span class="duration">学习耗时{{ lastest.duration }}分钟</span>
            </p>
            <mooc-progress
                    :percentage="data.progress"
                    :show-text="false"
                    :height="20"
                    color="#f01414"
            />
            <p class="latest">
              上次学习至：{{ lastest.chapter }}
            </p>
          </div>

          <div class="tips-btn">
            {{ lastest.percent > 0 ? '继续学习' : '开始学习' }}
          </div>

<!--          &lt;!&ndash; 课程须知 &ndash;&gt;-->
<!--          <div class="tips-content">-->
<!--            <dl>-->
<!--              <dt>课程须知</dt>-->
<!--              <dd>{{data.baseKnowledge}}</dd>-->
<!--              <dd>2、对Es6和webpack有简单了解。</dd>-->
<!--            </dl>-->
<!--            <dl>-->
<!--              <dt>老师告诉你能学到什么？</dt>-->
<!--              <dd>{{data.learn}} </dd>-->
<!--              <dd>2、理解Vue编程理念与直接操作Dom的差异</dd>-->
<!--              <dd>3、Vue常用的基础语法 </dd>-->
<!--              <dd>4、使用Vue编写TodoList功能 </dd>-->
<!--              <dd>5、什么是Vue的组件和实例 </dd>-->
<!--              <dd>6、Vue-cli脚手架工具的使用</dd>-->
<!--              <dd>7、但文件组件，全局样式与局部样式</dd>-->
<!--            </dl>-->
<!--          </div>-->
        </div>


        <recommend :list="recommend.data" :title="recommend.title" />
        <detail-tags v-if="tags.length" :list="tags" />
        <recommend :list="related.data" :title="related.title" />
      </div>
    </div>
  </div>
</template>
<script>
import DetailTips from './course-detail-tips.vue'
import Recommend from 'components/recommend/recommend.vue'
import DetailTags from './course-detail-tags.vue'
export default {
  props: {
    data: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      currentNavIndex: 0, // 当前导航的索引
      navList: [] // 导航数据
    }
  },
  created () {
    // 初始化导航数据
    this.navList = [
      { title: '课程章节', number: 0, componentName: 'chapter', key: "chapter" },
      { title: '问答', number: 1155, componentName: 'question-answer', key: 'answer' },
      // { title: '同学笔记', number: 0, componentName: '' },
      { title: '用户评价', number: 251, componentName: 'comment', key: 'comment' }
    ]
    console.log(this.data)
  },
  computed: {
    componentName () {
      return this.navList[this.currentNavIndex].componentName
    },
    content () {
      const key = this.navList[this.currentNavIndex].key
      return this.data[key] || {}
    },
    // 推荐课程
    recommend () {
      return this.data.recommend || {}
    },
    // 相关课程
    related () {
      return this.data.related || {}
    },
    // 专题标签
    tags () {
      return this.data.tags || []
    },
    // 学习情况
    lastest () {
      return this.data.lastest || {}
    }
  },
  methods:{
    playVideo(id){
      this.$router.push({ path: `/video/${id}` })
    }
  },
  components: {
    DetailTips,
    Recommend,
    DetailTags,
    Chapter: () => import('components/chapter/chapter.vue'),
    QuestionAnswer: () => import('components/question-answer/question-answer.vue'),
    Comment: () => import('components/comment/comment.vue')
  }
}
</script>
<style lang="stylus" scoped>
  .course-detail-content
    .detail-nav
      position: relative;
      height: 68px;
      line-height: 68px;
      box-shadow: 0 4px 8px 0 rgba(7,17,27,0.15);
      .nav-item
        position: relative;
        display: inline-block;
        margin-right: 80px;
        font-size: 16px;
        color: #1c1f21;
        font-weight: 700;
        cursor: pointer;
        &.active
          color: #f20d0d;
          &::after {
            content: '';
            display: block;
            margin: -15px auto 0px;
            width: 16px;
            height: 3px;
            border-radius: 15px;
            background-color: #f20d0d;
          }
        .nav-number
          display: inline-block;
          position: absolute;
          top: 10px;
          right: -20px;
          font-size: 12px;
          line-height: 1;
          color: #9199a1;
    .detail-information
      margin-top: 36px;
      margin-bottom: 36px;
      display: flex;
      align-items: top;
      .information-left
        flex: 1;
      .information-right
        margin-left: 32px;
        flex: 0 0 320px;
        width: 320px;
        & > div
          margin-bottom: 36px;
  .chapter
    & > div
      margin-bottom: 16px;
      padding: 24px 32px 32px;
      background-color: #fff;
      box-shadow: 0 8px 16px rgba(7,17,27,0.1);
      border-radius: 12px;
      color: #1c1f21;
      font-size: 14px;
      &.chapter-introduce
        line-height: 28px;
      &.chapter-item
        .chapter-title
          font-size: 16px;
          line-height: 24px;
          font-weight: 700;
        .chapter-desc
          margin-top: 2px;
          margin-bottom: 16px;
          font-size: 12px;
          color: #545c63;
        .term-item
          width: 100%;
          padding-left: 12px;
          line-height: 48px;
          cursor: pointer;
          & > p
            display: flex;
            align-items: center;
            & > span
              &:nth-child(2)
                flex: 1;
          &:hover
            background-color: rgba(242,13,13,.05);
            border-radius: 4px;
            color: #f20d0d;
            .play
              color: #f20d0d;
            .right
              & > i
                color: #f20d0d!important;
          .play
            margin-right: 8px;
            font-size: 24px;
            color: #9199a1;
          .right
            margin-right:15px;
            font-size: 16px;
            color: #d9dde1;
            .complete, .doning
              color: #00b43c;
              font-size: 12px;
            .doning
              i
                margin-left: 10px;
                font-size: 12px;
    .complete-info
      margin-bottom: 16px;
      padding: 12px 0 12px 32px;
      font-size: 16px;
      color: #93999f;
      line-height: 24px;
      .iconfont
        display: inline-block;
        vertical-align: middle;
        margin-right: 12px;
        font-size: 24px;
  .course-detail-tips
    padding: 24px 32px 32px;
    background-color: #fff;
    box-shadow: 0 8px 16px 0 rgba(7,17,27,.1);
    border-radius: 12px;
    .learn-info
      padding-bottom: 12px;
      font-size: 12px;
      color: #545c63;
      & > p
        margin-bottom: 9px;
        line-height: 24px;
        &.latest
          margin-top: 24px;
          line-height: 1;
        .percent
          font-size: 14px;
          font-weight: 700;
        .duration
          float: right;
    .tips-btn
      padding: 11px 32px;
      border-radius: 24px;
      background-color: #f20d0d;
      text-align: center;
      line-height: 24px;
      font-size: 16px;
      color: #fff;
      cursor: pointer;
      &:hover
        background-color: #c20a0a;
    .tips-content
      dl
        margin-top: 24px;
        dt
          margin-bottom: 8px;
          font-size: 14px;
          font-weight: 700;
        dd
          color: #545c63;
          font-size: 12px;
          line-height: 24px;
</style>
